<script setup lang="ts">

import {useRoute, useRouter} from "vue-router";
import {ref} from "vue";
const route = useRoute();

const id = ref(route.params.id);

function jump() {
  window.location.href = `/router/dynamic/${id.value}`;
}

</script>

<template>
  <el-card header="路由参数" class="mb-4">
    <div class="flex gap-4 mb-4">
      <span>Using attributes</span>
      <el-input
          v-model="id"
          style="width: 240px"
          placeholder="Pick a date"
          @keyup.enter="jump"
      />
      <el-link :href="`/router/dynamic/${id}`" type="primary">跳转链接</el-link>

    </div>

    <pre v-highlight ><code class="vue">import User from './User.vue'
// 这些都会传递给 `createRouter`
const routes = [
  // 动态字段以冒号开始
  { path: '/users/:id', component: User },
]</code></pre>
    <p>uid: {{ id }}</p>
    <p>常规参数只匹配 url 片段之间的字符，用 / 分隔。如果我们想匹配<b>任意路径</b>，我们可以使用自定义的 路径参数 正则表达式，在 <i>路径参数</i> 后面的括号中加入 正则表达式 :</p>
    <pre v-highlight><code class="vue">const routes = [
  // 将匹配所有内容并将其放在 `route.params.pathMatch` 下
  { path: '/:pathMatch(.*)*', name: 'NotFound', component: NotFound },
  // 将匹配以 `/user-` 开头的所有内容，并将其放在 `route.params.afterUser` 下
  { path: '/user-:afterUser(.*)', component: UserGeneric },
]</code></pre>
    <p>注：<code>/:pathMatch(.*)*</code>为 <b>可重复参数</b>,这里指的是 <code>:pathMatch(.*)</code>重复的次数,可匹配 <code>/aaa</code>,<code>/aaa/bbb</code>,<code>/aaa/bbb/ccc</code>等</p>
  </el-card>

  <el-card header="正则">
    <pre v-highlight><code class="javascript">{
  path: '/user/:id(\\d+)',
}</code></pre>
    参数 <code class="javascript">id</code> 的正则表达为：<code>[0-9]+</code>

  </el-card>
</template>

<style scoped>
.w150 {
  width: 150px;
}
</style>